<script setup lang="ts">
import { onLoad } from '@dcloudio/uni-app'
import { reactive, ref } from 'vue'
import type { DetailInfoVO } from '@/types/user'
import {getDetailInfoAPI, updateUserInfoAPI, uploadAPI} from '@/api/user'
import { Gender } from '@/types/constants'
import { useToast } from 'wot-design-uni'
import useUserInfoStore from '@/stores/userInfo'
import { switchNavBarTheme } from "@/utils/common";

const model = reactive<DetailInfoVO>({
  id: 0,
  nickname: '',
  avatar: null,
  gender: Gender.UNKNOWN,
  phone: '',
  email: null,
})
const oldAvatar = ref<string | null>(null)
onLoad(async () => {
  switchNavBarTheme()
  const res = await getDetailInfoAPI()
  if (res.code === 200) {
    Object.assign(model, res.data)
    oldAvatar.value = model.avatar
  }
})
const defaultAvatar = ref('/static/images/avatar.png')
const updateAvatar = () => {
  uni.chooseImage({
    count: 1,
    success: (res) => {
      model.avatar = res.tempFilePaths[0]
    },
  })
}
const toast = useToast()
const save = async () => {
  if (model.nickname === '') toast.show('昵称不能为空')
  if (model.email && model.email !== '' &&
    !/^(?=.{1,100}$)[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/.test(model.email)) {
    return toast.show('邮箱格式不正确')
  }
  if (model.avatar !== null && model.avatar !== oldAvatar.value) {
    const res = await uploadAPI(model.avatar)
    if (res.code === 200) model.avatar = res.data
    else toast.show(res.msg)
  }
  const res = await updateUserInfoAPI(model)
  if (res.code === 200) {
    const userInfoStore = useUserInfoStore()
    userInfoStore.updateUserInfo({ avatar: model.avatar, nickname: model.nickname })
    toast.show('保存成功')
  }
}
</script>

<template>
  <wd-toast />
  <view class="head">
    <image style="width: 100%; height: 100%" src="@/static/images/head.png" />
  </view>
  <view class="baseInfo">
    <view class="avatar-out">
      <wd-img
        @click="updateAvatar"
        custom-class="avatar-in"
        round
        :src="model.avatar ? model.avatar : defaultAvatar"
      />
    </view>
    <wd-form :model="model" custom-class="form">
      <view class="avatar-text">点击更换头像</view>
      <wd-cell-group border custom-class="cell-group">
        <wd-input
          label="昵称"
          placeholder="请输入昵称"
          size="large"
          :maxlength="30"
          showWordLimit
          v-model="model.nickname"
          label-width="160rpx"
          clearable
        />
        <wd-cell title="性别" custom-style="margin-left: -6rpx;" title-width="160rpx" size="large">
          <wd-radio-group
            custom-style="text-align: left; margin-top: -16rpx;"
            v-model="model.gender"
            inline
            shape="dot"
            size="large"
          >
            <wd-radio :value="Gender.MALE">男</wd-radio>
            <wd-radio :value="Gender.FEMALE">女</wd-radio>
          </wd-radio-group>
        </wd-cell>
        <wd-input
          label="手机号"
          v-model="model.phone"
          label-width="160rpx"
          size="large"
          readonly
        ></wd-input>
        <wd-input
          label="邮箱"
          placeholder="请输入邮箱"
          :v-model="model.email ? model.email : ''"
          size="large"
          label-width="160rpx"
          clearable
        ></wd-input>
      </wd-cell-group>
    </wd-form>
    <wd-button
      @click="save"
      custom-style="background-color: #2796f2; margin-top: 60rpx; width: 30%"
      block>
      保存
    </wd-button>
  </view>
</template>

<style lang="scss" scoped>
.head {
  width: 100%;
  height: 250rpx;
}
.baseInfo {
  width: 100%;
  position: relative;
  border-radius: 40rpx 40rpx 0 0;
  top: -50rpx;
  background-color: var(--front-color);
  padding-bottom: 60rpx;
  .avatar-out {
    width: 200rpx;
    height: 200rpx;
    border-radius: 50%;
    position: relative;
    top: -100rpx;
    margin: auto;
    border: 1rpx solid var(--back-color);
    background-color: var(--front-color);
    display: flex;
    justify-content: center;
    align-items: center;
    :deep(.avatar-in) {
      width: 188rpx;
      height: 188rpx;
      border-radius: 50%;
    }
  }
  :deep(.form) {
    margin-top: -90rpx;
    padding: 0 60rpx 0;
  }
  .avatar-text {
    font-size: 28rpx;
    text-align: center;
    margin-bottom: 20rpx;
  }
}
</style>
